<template>
	<navigator class="debt-box" hover-class="none" :url="'/pages/product/show?id='+item.id">
		<image
			:src="item.picture"
			class="product-image" mode="scaleToFill"></image>
		<view class="product-name">{{item.name}}1500/2500/5000/8000元</view>
		<view class="product-sales">销量{{item.real_sales}}</view>
		<view class="product-foot">
			<view class="product-foot-price">
				{{item.price}}
			</view>
			<u-icon name="plus-circle"></u-icon>
		</view>

	</navigator>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		props: {
			icon: {
				type: String,
				default: ''
			},
			item:{
				type: Object,
				default: {}
			}
		},
		methods: {
			eventClick() {
				this.$emit('eventClick');
			}
		}
	};
</script>

<style lang="scss">
	.debt-box {
		width: 345rpx;
		background-color: #fff;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 15rpx 0;

	}

	.debt-box .product-image {
		height: 320rpx;
		width: 320rpx;
		border-radius: 16rpx;
	}

	.debt-box .product-name {
		font-size: 28rpx;
		color: #333;
		width: 320rpx;
		height: 120rpx;
		margin: 20rpx 0;
	}

	.debt-box .product-sales {
		font-size: 24rpx;
		color: #999;
		width: 320rpx;

	}

	.debt-box .product-foot {
		width: 320rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60rpx;
	}

	.debt-box .product-foot .product-foot-price {
		font-size: 32rpx;
		color: #ff5000;

	}
</style>
